import React from 'react'
import type { FormProps } from 'antd';
import { Button, Form, Input, message } from 'antd';
import { getLogin } from '../../api/us'
import { useNavigate } from 'react-router-dom';
const Index = () => {
    const [messageApi, contextHolder] = message.useMessage();
    const nav = useNavigate()
    type FieldType = {
        account?: string;
        password?: string;
    };

    const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
        let { account, password } = values
        const res = await getLogin({ account, password })
        localStorage.setItem('token', res.token)
        // alert('登录成功')
        nav('/home')
        console.log(res)
         messageApi.open({
            content: '欢迎用户 登录成功',
        });
    };


    return (
        <div>
            {contextHolder}
            <Form
                name="basic"
                labelCol={{ span: 8 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="账号"
                    name="account"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item<FieldType>
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Index
